<template>
    <div class="ChangeTable">
        <Row>
            <Col span="24" style="padding-bottom: 8px">
                <Button :disabled="selection.length <= 0" type="primary" size="small" @click="toApply">应用</Button>
                <Button type="primary" size="small" :loading="downloadLoading" @click="exportReport" icon="ios-download-outline">导出报表</Button>
            </Col>
            <Col span="24">
                <Table ref="table" maxHeight="600" :columns="tableHead" :data="contractTable.records"
                       @on-selection-change="selectChange" :loading="loading" border>
                    <template slot-scope="{ row, index }" slot="businessType">
                        <span>{{ getTitle(dataDict['businessTypeDict'], row.businessType) }}</span>
                    </template>
                    <template slot-scope="{ row, index }" slot="modelValue">
                        <Tag :class="'modelValue_' + row.modelValue">&nbsp;{{ row.modelValue }}&nbsp;</Tag>

                        <!--                        <Tag v-if="row.modelValue === 'A'" color="blue">{{ row.modelValue }}</Tag>-->
                        <!--                        <Tag v-else-if="row.modelValue === 'B'" color="green">{{ row.modelValue }}</Tag>-->
                        <!--                        <Tag v-else-if="row.modelValue === 'C'" color="yellow">{{ row.modelValue }}</Tag>-->
                        <!--                        <Tag v-else-if="row.modelValue === 'D'" color="red">{{ row.modelValue }}</Tag>-->
                    </template>
                    <template slot-scope="{ row, index }" slot="action">
                        <Button type="primary" size="small" @click="toApply(row)">应用</Button>

                        <Button type="primary" size="small" @click="toChange(row)">修改</Button>

                    </template>
                </Table>
            </Col>
            <Col span="24" style="padding-top:16px;">
                <Row type="flex" justify="end" class="table-page">
                    <Page
                        :current="contractTable.current"
                        :transfer="true"
                        :total="contractTable.total"
                        :page-size="contractTable.size"
                        @on-change="changePage"
                        @on-page-size-change="changePageSize"
                        :page-size-opts="pageSizeOpts"
                        size="small"
                        show-total
                        show-elevator
                        show-sizer
                    ></Page>
                </Row>
            </Col>
        </Row>
    </div>
</template>
<script>
import {getTitleFromDataDict} from "_p/afs-channel/assets/js/utils.js";

import {applyList, exportGradeResult} from "_p/afs-channel/api/grade-model"

import {getDictDataByType, getByTypes} from "_p/basic/api/admin/datadic";

export default {
    props: {
        formValidate: {
            type: Object,
            required: true
        },
        dataDict: {
            type: Object,
            required: true
        },
        contractTable: {
            type: Object,
            required: true
        },
        loading: {
            type: Boolean,
            required: true,
            default: true
        },
        // @showSpin="showSpin"
        // @closeSpin="closeSpin"
    },
    data() {
        return {
            pageNo: 1,
            selection: [],
            resolveDisable: true,
            downloadLoading:false,
            pageSizeOpts: [10, 20, 50, 100],
            tableHead: [
                // {
                //     type: 'index',
                //     width: 60,
                //     align: 'center',
                // },
                {
                    type: 'selection',
                    width: 60,
                    align: 'center',
                    // fixed: 'left'
                },
                {
                    title: "操作",
                    slot: "action",
                    width: 120,
                    align: "center"
                },
                {
                    title: '合作商全称',
                    key: 'channelFullName',
                    minWidth: 200,
                },
                // {
                //     title: '合作商编号',
                //     key: 'channelCode',
                //     minWidth: 200,
                // },
                {
                    title: '业务类型',
                    key: 'businessType',
                    type: 'singleSelect',
                    slot: 'businessType',
                    minWidth: 100,
                },
                {
                    title: '客户经理',
                    key: 'customerManager',
                    minWidth: 200,
                },
                {
                    title: '上一次评级',
                    key: 'lastModelValue',
                    minWidth: 100,
                },
                {
                    title: '本次评级',
                    key: 'modelValue',
                    slot: 'modelValue',
                    align: 'center',
                    minWidth: 100,
                },
                {
                    title: '总分',
                    key: 'modelSocre',
                    minWidth: 100,
                },
                {
                    title: '月评日期',
                    key: 'gradeDateStr8',
                    minWidth: 100,
                },
            ],

        };
    },
    mounted() {
        this.init();
    },
    activated() {
        this.selection = []
    },
    methods: {
        init() {
            // 渠道评级一级指标(channelGradeLevel1Element) 一二级指标数据
            this.getByTypes(['channelGradeElement', 'channelGradeLevel1Element'])
        },
        getByTypes(dict) {
            getByTypes(dict).then(res => {
                if (res.code === "0000" && res.data) {
                    const {channelGradeElement, channelGradeLevel1Element} = res.data
                    let arr = this.tableHead, tableColumns = [];
                    Array.isArray(channelGradeLevel1Element) && channelGradeLevel1Element.forEach(ele => {
                        ele.minWidth = 150;
                        ele.key = ele.value;
                        ele.title = ele.title + '(总分)';
                        arr.push(ele)
                    });
                    Array.isArray(channelGradeElement) && channelGradeElement.forEach(ele => {
                        ele.minWidth = 150;
                        ele.key = ele.value;
                        let newEle = {title: ele.title + '(分数)', key: ele.value + 'Value', minWidth: 150}
                        arr.push(ele, newEle)
                    });

                    this.tableHead = [...new Set(arr)]
                    console.log(this.tableHead, 'this.tableHead')

                }
            })
        },
        selectChange(val) {
            console.log(val, 'selection')
            let selection = []
            Array.isArray(val) && val.forEach(e => {
                selection.push(e.resultId)
            })
            this.selection = selection;
        },
        toApply(row) {
            let arr = []
            if (row && row.resultId) {
                arr.push(row.resultId)
            } else {
                arr = this.selection
            }
            console.log(arr, 'arrarrarr');

            this.showSpin();
            applyList({resultId: arr}).then(res => {
                this.closeSpin()
                if (res.code === "0000") {
                    this.$Message.success(res.data)
                }
            }).catch(e => {
                console.error(e)
                this.closeSpin()
            })
        },
        toChange(params) {
            if (!params) return;
            this.afs.newTab(
                this,//C:\CODE\afs-ui\src\projects\afs-channel\pages\grade-model\pages\grade-result-change
                "projects/afs-channel/pages/grade-model/pages/grade-result-change/grade-result-change",
                "修改评级结果",
                "ios-add",
                params,
                "grade-result-change-" + this.pageNo,
                [],
                true
            );
            this.pageNo += 1;
        },
        // 分页 Fn
        changePageSize(num) {
            this.formValidate.pageSize = num;

            // this.$emit("getList", this.formValidate);
        },
        changePage(num) {
            this.formValidate.pageNumber = num;

            this.$emit("getList", this.formValidate);
        },

        getTitle(data, val) {
            return getTitleFromDataDict(data, val);
        },

        showSpin() {
            this.$emit("showSpin");
        },
        closeSpin() {
            this.$emit("closeSpin");
        },
        rowClassName(row) {
            return 'modelValue_' + row.modelValue
        },
        exportReport() {
            let formValidate = {
                pageNumber: 1,
                pageSize: 100,
                condition: {}
            }
            this.downloadLoading = true;
            exportGradeResult(formValidate).then(res => {
                this.downloadLoading = false;
                if(res.code === '0000' && res.data) {
                    this.$refs.table.exportCsv({
                        filename:'动态评级报表',
                        columns :this.tableHead,
                        data :res.data
                    })
                }
            }).catch(e => {
                this.downloadLoading = false;
                console.error(e)
            })
        },
    }
};
</script>
<style scoped>
.export-btn {
    margin-bottom: 16px;
}
</style>
